<template>
    <div class="nav">
        <div class="page">
            <div @click="toHome">首页</div>
            <div @click="toBlog">文章</div>
            <div @click="toFile">文件</div>
        </div>
        <div class="user">
            <div @click="toPanel">
                USER {{ user.account }}
            </div>
        </div>
    </div>

    <n-divider />

</template>

<script setup>
import { onMounted, reactive } from "vue"
import { useRouter, useRoute } from 'vue-router'
import { NDivider } from "naive-ui"
import { epStore } from "../common/store.js";
import { storeToRefs } from "pinia";



const router = useRouter()

const store_data = epStore()
let { user_account } = storeToRefs(store_data)

const user = reactive({
    account: localStorage.getItem("USER_ACCOUNT") || null,
})


const toPanel = async () => {
    // 如果没有登录就跳转到登录页面
    if (!user.account) {
        await router.push("/login")
    } else  {
        await router.push("/panel")
    }
}


const toHome = async () => {
    await router.push("/home")
}

const toBlog = async () => {
    await router.push("/blog")
}

const toFile = async () => {
    await router.push("/file")
}



</script>

<style lang="scss" scoped>

.nav {
    font-size: 20px;
    padding-top: 20px;
    .page {
        display: flex;
        div {
            cursor: pointer;
            margin-left: 15px;
            &:hover {
                color: #18a058;
            }
            // span {
            //     font-size: 12px;
            // }
        }
    }
    .user {
        position: absolute;
        right: 0;
        top: 3%;
        div {
            cursor: pointer;
            margin-left: 15px;
            &:hover {
                color: #18a058;
            }
            font-size: 16px;
            right: 0;
            text-align: right;
            margin-right: 16px;
        }
    }
}

</style>